<template>

    <!-- 养殖信息 -->

    <table style="width:100%;font-size: 15px;">
        <tr>
            <td>
                <h2>养殖信息</h2>
            </td>
            <td> <el-button @click="addbreedinfo">设置</el-button></td>
        </tr>



        <tr>
            <td>品种：{{ breedinfo.variety }}</td>
            <td>来源：{{ breedinfo.goodName }}</td>
        </tr>
        <tr>
            <td>饲养天数：{{ breedinfo.feedDate }}天</td>
            <td>饲养品牌：{{ breedinfo.feedType }}</td>
        </tr>
        <tr>
            <td>饲养负责人：{{ breedinfo.feeder }}</td>
            <td v-if="breedinfo.lineDate">出栏日期：{{ breedinfo.lineDate.substring(0, 10) }}</td>
        </tr>

    </table>
    <!-- 养殖信息 对话框 -->
    <el-dialog v-model="dialogVisible" title="养殖信息" width="500" :before-close="handleClose">
        <span>

            <el-form :model="breedinfo" label-width="120px">
                <el-form-item label="品种">
                    <el-input v-model="breedinfo.variety" />
                </el-form-item>
                <el-form-item label="来源">
                    <el-input v-model="breedinfo.goodName" />
                </el-form-item>
                <el-form-item label="饲养天数">
                    <el-input v-model="breedinfo.feedDate" />
                </el-form-item>
                <el-form-item label="饲养品牌">
                    <el-input v-model="breedinfo.feedType" />
                </el-form-item>
                <el-form-item label="饲养负责人">
                    <el-input v-model="breedinfo.feeder" />
                </el-form-item>
                <el-form-item label="出栏日期">
                    <el-input type="date" v-model="breedinfo.lineDate" />
                </el-form-item>


            </el-form>



        </span>
        <template #footer>
            <div class="dialog-footer">

                <el-button type="primary" @click="UpdateBreedinfo">
                    保存
                </el-button>
            </div>
        </template>
    </el-dialog>
    <br>

    <!-- 免疫信息 -->

    <h5 style="float: left;">免疫信息</h5> <el-button style="float: left;" @click="Immunityinfoshow = true">新增行</el-button>
    <br>
    <hr>
    <el-table :data="ImmunityinfoList">
        <el-table-column prop="feedDate" label="饲养天数"></el-table-column>
        <el-table-column prop="careType" label="免疫方式"></el-table-column>
        <el-table-column prop="careMethod" label="免疫方法"></el-table-column>
        <el-table-column prop="immunityId" label="操作">
            <template #default="scope">
                <el-button link type="primary" @click="UpdateImmunityinfo(scope.row)">修改</el-button>
                <el-button link type="danger" @click="DeleteImmunityinfo(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <table v-show="Immunityinfoshow">
        <tr>
            <td>
                <el-input v-model="Immunityinfo.feedDate" />
            </td>
            <td>
                <el-input v-model="Immunityinfo.careType" />
            </td>
            <td>
                <el-input v-model="Immunityinfo.careMethod" />
            </td>
            <td>
                <el-button link type="primary" @click="AddImmunityinfo">添加</el-button>
                <el-button link type="primary" @click="Immunityinfoshow = false">取消</el-button>
            </td>
        </tr>
    </table>

    <!-- 动检证添加删除 -->
    <h5>动检证</h5>

    <el-upload v-model:file-list="fileList" action="http://localhost:5240/api/SourceList/Upload"
        list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove"
        :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
        <el-icon>
            <Plus />
        </el-icon>
    </el-upload>

    <el-dialog v-model="dialogVisibleimages">
        <img w-full :src="dialogImageUrl" alt="Preview Image" />
    </el-dialog>

    <!-- 养殖信息-企业信息 -->
    <h5>企业信息</h5>
    <hr />
    <table style="width:100%;font-size: 15px;">
        <tr>
            <td>
                <!-- <h2>养殖信息</h2> -->
            </td>
            <td> <el-button @click="UpdateBusiness">设置</el-button></td>
        </tr>



        <tr>
            <td>养殖场：{{ Businessinfo.farming }}</td>
            <td>负责人：{{ Businessinfo.leader }}</td>
        </tr>
        <tr>
            <td>存栏数量：{{ Businessinfo.presentCount }}只</td>

        </tr>


    </table>
    <!-- 养殖信息-企业设置 对话框 -->
    <el-dialog v-model="dialogVisibleBusiness" title="养殖信息" width="500" :before-close="handleClose">
        <span>

            <el-form :model="Businessinfo" label-width="120px">
                <el-form-item label="养殖场">
                    <el-input v-model="Businessinfo.farming" />
                </el-form-item>
                <el-form-item label="负责人">
                    <el-input v-model="Businessinfo.leader" />
                </el-form-item>
                <el-form-item label="存栏数量">
                    <el-input v-model="Businessinfo.presentCount" />
                </el-form-item>



            </el-form>



        </span>
        <template #footer>
            <div class="dialog-footer">

                <el-button type="primary" @click="UpdateBusinessinfo">
                    保存
                </el-button>
            </div>
        </template>
    </el-dialog>

    <br />
    <h5>企业照片</h5>
    <hr>
    <br />
    <el-upload v-model:file-list="fileListBusiness" action="http://localhost:5240/api/SourceList/Upload"
        list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemoveBusiness"
        :on-success="handleAvatarSuccessBusiness" :before-upload="beforeAvatarUpload">
        <el-icon>
            <Plus />
        </el-icon>
    </el-upload>

    <el-dialog v-model="dialogVisibleimages">
        <img w-full :src="dialogImageUrl" alt="Preview Image" />
    </el-dialog>

</template>



<script setup lang="ts">
import { ref, inject, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus';
import { useRouter, useRoute } from 'vue-router'
import { type AxiosStatic } from 'axios'


import { Plus } from '@element-plus/icons-vue'

import type { UploadProps, UploadUserFile } from 'element-plus'


const dialogVisible = ref(false)

const axios = inject('axios') as AxiosStatic
const router = useRouter()
const route = useRoute()
const dialogVisibleBusiness = ref(false)//设置养殖信息企业信息对话框
const id = route.query.id;

//加载生命周期函数
onMounted(() => {
    GetBreedinfoById()// 
    GetImmunityinfoById()//
    GetBusinessinfoById()//反填养殖信息企业信息
    GetImgList(1)//反填显示动检证图片
    GetBusinessImgList(2)//反填显示养殖信息企业图片

})
//定义养殖信息实体
const breedinfo = ref({
    "breedId": 0,
    "sourceId": id,
    "variety": "",
    "goodName": "",//来源
    "feedDate": 0,
    "feedType": "",
    "feeder": "",
    "lineDate": ""
})
//弹框加载信息 
const addbreedinfo = () => {
    dialogVisible.value = true;
}

//加载养殖信息 SourceList/GetBreedinfoById
const GetBreedinfoById = () => {
    //获取数据
    axios.get('SourceList/GetBreedinfoById?id=' + id).then((res) => {
        console.log(res.data)
        if (res.data.data != null) {
            breedinfo.value = res.data.data
        }

    })
}



//设置养殖信息-修改 
const UpdateBreedinfo = () => {
    breedinfo.value.sourceId = id
    //  console.log(sources.value)
    axios.post('/SourceList/UpdateBreedinfo', breedinfo.value).then((res) => {
        if (res.data.code == 1) {
            ElMessage({
                message: '设置成功',
                type: 'success',
            })
            dialogVisible.value = false
            GetBreedinfoById()
        } else {
            ElMessage.error('添加失败')
            return;

        }
    })

}


const ImmunityinfoList = ref([])
//加载免疫信息列表
const GetImmunityinfoById = () => {
    //获取数据
    axios.get('SourceList/GetImmunityinfoById?id=' + id).then((res) => {
        console.log(res.data)
        if (res.data.data != null) {
            ImmunityinfoList.value = res.data.data
        }

    })

}

//添加免检信息 
const Immunityinfoshow = ref(false)
const Immunityinfo = ref({

    //  "immunityId": 0,
    "sourceId": 0,
    "feedDate": "",
    "careType": "",
    "careMethod": "",
    // "delName": "",
    // "delDateTime": ""
})
//添加免疫信息
const AddImmunityinfo = () => {
    breedinfo.value.sourceId = id
    //  console.log(sources.value)
    axios.post('/SourceList/AddImmunityinfo', Immunityinfo.value).then((res) => {
        if (res.data.code == 1) {
            ElMessage({
                message: '保存成功',
                type: 'success',
            })
            dialogVisible.value = false
            GetImmunityinfoById()
        } else {
            ElMessage.error('添加失败')
            return;

        }
    })

}

//上传图片
const fileList = ref([])
//图片上传方法
const handleAvatarSuccess = (val: any) => {
    imagesinfo.value.url = val
    AddImages(1)//添加动检证
    console.log(val)

}

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
    if (rawFile.type !== 'image/jpeg') {
        ElMessage.error('请上传正确的格式')
        return false
    } else if (rawFile.size / 1024 / 1024 > 2) {
        ElMessage.error('文件大小不能大于 2MB!')
        return false
    }
    return true
}

const dialogImageUrl = ref('')
const dialogVisibleimages = ref(false)
//移除图片
const handleRemove = (val: any) => {
    DelImages(val.id)//动检证删除
}

const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
    dialogImageUrl.value = uploadFile.url!
    dialogVisibleimages.value = true
}
//根据类型获取图片信息
const searchinfo = ref({
    SourceId: 0,
    TraceType: 0,
    ImgType: 0,

})
const imagesList = ref([])
//反填动检证图片信息
const GetImgList = (val: any) => {
    //获取数据
    axios.get('SourceList/GetImgList', {
        params: {
            SourceId: id,
            TraceType: 1,
            ImgType: val,
        }
    }).then((res) => {
        //  console.log(res.data)
        if (res.data.data != null) {

            imagesList.value = res.data.data
            dialogImageUrl.value = res.data.data
            res.data.data.forEach((item: any) => {
                fileList.value.push({
                    name: 'http://localhost:5240' + item.url,
                    url: 'http://localhost:5240' + item.url,
                    id: item.id
                })



            })
        }
        console.log(fileList.value)
    })

}
// '图片类型: 0-产品检验报告; 1-养殖动检证; 2-养殖企业照片; 
//3 - 屠宰相关资质; 4 - 屠宰企业照片; 5 - 深加工信息商品安全信息; 
//6 - 深加工信息相关材料; 7 - 深加工信息辅料相关材料; 8 - 深加工信息添加剂相关材料;
//9 - 深加工信息包材相关材料; 10 - 深加工信息企业照片',
//图片信息表 
const imagesinfo = ref({
    //  "id": 0,
    "sourceId": 0,
    "traceType": 0,
    "imgType": 0,
    "url": ""
})
//添加动检证照片信息
const AddImages = (val: any) => {
    imagesinfo.value.sourceId = id;
    imagesinfo.value.traceType = 1;
    imagesinfo.value.imgType = val;

    axios.post('/SourceList/AddImages', imagesinfo.value).then(res => {
        if (res.data.code == 1) {
            ElMessage({
                message: '保存成功',
                type: 'success',
            })
            GetBreedinfoById()
            dialogVisible.value = false

        } else {
            ElMessage.error('添加失败')
            return;

        }
    })
}
//移除动检证图片 DelImages
const DelImages = (val: any) => {
    axios.post('/SourceList/DelImages?id=' + val).then(res => {
        if (res.data.data == 1) {
            ElMessage({
                message: '删除成功',
                type: 'success',
            })
            GetBreedinfoById()//
        } else {
            ElMessage.error('删除失败')
            return;

        }
    })
}
//养殖信息企业信息实体
const Businessinfo = ref({
    "businessId": 0,
    "sourceId": 0,
    "farming": "",///
    "leader": "",
    "presentCount": 0
})


//反填养殖信息企业信息
const GetBusinessinfoById = () => {
    axios.get('/SourceList/GetBusinessinfoById?id=' + id).then(res => {
        Businessinfo.value = res.data.data
    })
}
//弹出养殖信息企业信息对话框
const UpdateBusiness = () => {
    dialogVisibleBusiness.value = true
}
//设置养殖信息-企业信息
const UpdateBusinessinfo = () => {
    Businessinfo.value.sourceId = id
    axios.post('/SourceList/UpdateBusinessinfo', Businessinfo.value).then(res => {
        if (res.data.data == 1) {
            ElMessage({
                message: '保存成功',
                type: 'success',
            })

            dialogVisibleBusiness.value = false
            GetBreedinfoById()///刷新页面
        }
        else {
            ElMessage.error('保存失败')
            return;
        }
    })
}
/////设置养殖信息企业照片
const fileListBusiness = ref([])
//照片显示
const GetBusinessImgList = (val: any) => {
    //获取数据
    axios.get('SourceList/GetImgList', {
        params: {
            SourceId: id,
            TraceType: 1,
            ImgType: val,
        }
    }).then((res) => {
        console.log(res.data)
        if (res.data.data != null) {
            // imagesList.value = res.data.data
            // dialogImageUrl.value = res.data.data
            res.data.data.forEach((item: any) => {
                fileListBusiness.value.push({
                    name: 'http://localhost:5240' + item.url,
                    url: 'http://localhost:5240' + item.url,
                    id: item.id
                })



            })
        }
    })

}
//照片添加--移除
const handleAvatarSuccessBusiness = (val: any) => {
    imagesinfo.value.url = val

    AddImages(2)//添加养殖企业信息
}
const handleRemoveBusiness = (val: any) => {
    DelImages(val.id)//删除动检证养殖企业信息
}











</script>
<style scoped>
.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>